<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
{{--    <link rel="stylesheet" href="{{asset('css/font.css')}}">--}}
{{--    <link rel="stylesheet" href="{{asset('css/xadmin.css')}}">--}}
{{--    <script src="{{asset('lib/layui/layui.js')}}" charset="utf-8"></script>--}}
{{--    <script type="text/javascript" src="{{asset('js/xadmin.js')}}"></script>--}}
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="{{asset("css/jquery-ui.css")}}">
    {{--<link rel="stylesheet" href="/resources/demos/style.css">--}}
    <style>
        #sortable { list-style-type: none; margin: 0; padding: 0;}
        #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 80px; height: 100px; font-size: 2em; text-align: center; }
        #building-container{text-align: center;display: flow}
        #building-no{
            background-color: #fbed50;
        }
    </style>
    <script src="{{asset('js/jquery.min.js')}}"></script>
    <script src="{{asset('js/jquery-ui.js')}}"></script>
    <script>
        $( function() {
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
        } );
        function reset() {
            $("#sortable").sortable('cancel');
        }
        function save() {
            var arr = $("#sortable").sortable('toArray');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: '/buildings/order/save',
                type: 'POST',
                data:{order:arr},
                dataType: "json",
                success: function (d) {
                    if(d.error){
                        layer.msg('保存失败：'+d.message, {icon: 2, time: 1000});
                    }else{
                        layer.msg(`保存成功`, {icon: 1, time: 1000});
                    }
                },
                error: function (err) {
                    layer.msg('保存失败', {icon: 2, time: 1000});
                }
            });
        }
    </script>
</head>
<body>
<div style="padding: 5px 20px;">
    <button type="button" class="layui-btn" onclick="reset()">重置</button>
    <button type="button" class="layui-btn" onclick="save()">保存</button>
</div>
<div class="layui-fluid">
<ul id="sortable">
    @foreach($buildings as $k=>$building)
{{--    <li class="ui-state-default">{{str_pad($k+1,2,'0',STR_PAD_LEFT)}}  {{$building->name}}>></li>--}}
    <li class="ui-state-default" id="{{$building->id}}">
        <div id="building-container">
            <div id="building-no">{{str_pad($k+1,2,'0',STR_PAD_LEFT)}}</div>
            <div id="building-name">{{$building->name}}</div>
        </div>
    </li>
    @endforeach
</ul>
</div>

</body>
</html>